<template>
	<view class="out-box">
		<!-- <view class="hader">
			<view class="hader_title">
				<view class="hader_title_left"></view>
				<view class="hader_title_right">{{ user.shop_type == 1?'店铺转让信息' : '店铺求租信息' }}<span class="spanoone"> (尚未发布)</span></view>
			</view>
			<view class="hader_main" v-if="user.shop_type == 1">
				<view class="item_left">
					<image class="item_left_img" :src=trabsfer.result.cover_img></image>
				</view>
				<view class="item_right">
					<view class="item_right_one">{{trabsfer.result.title}}</view>
					<span class="item_right_two">{{trabsfer.result.city + '-'+trabsfer.result.county + ' | ' + trabsfer.result.shop_area+"m²"}}</span><br>
					<view v-if="trabsfer.result.feature_label" class="item_right_identifying">
						<view v-for="item1,index1 in trabsfer.result.feature_label.split(',')" :key="index1">
							<view class="item_right_identifying_item">{{ item1}}</view>
						</view>
					</view>
					<span class="item_right_three">{{ ( trabsfer.result.rent == '' || trabsfer.result.rent == null ||trabsfer.result.rent == '面议' || trabsfer.result.rent =='null') ? '面议': trabsfer.result.rent + '元/月' }}</span>
				</view>
			</view>
			<view class="hader_maintwo" v-if="user.shop_type == 2">
				<view class="item_left">
					<view class="item_left_one"><span v-if="trabsfer.result.is_swerve == 1" class="isspan">(急租)</span>{{ trabsfer.result.title }}</view>
					<view  class="item_right_identifying" v-if="trabsfer.result.feature_label != null && trabsfer.result.feature_label != '' ">
						<view v-for="item1,index in trabsfer.result.feature_label.split(',')" :key="index">
							<view class="item_right_identifying_item">{{ item1}}</view>
						</view>
					</view>
					<view class="item_left_two">联系人：{{ trabsfer.result.name }}</view>
					<view class="item_left_two">联系电话：{{trabsfer.result.phone}}</view>
				</view>
			</view>
			
			<view class="hader_hr"></view>
			<view class="hader_prompt">本平台是专业发布转让出租店铺信息平台，流量采购于抖音等高质量媒体平台，店铺展示需进行付费购买！</view>
		</view>
		
		<view class="main" v-if="product_lists && product_lists[0]&&product_lists[0].product_name">
			<view class="main_top">
				<view class="main_top_left">
					<view class="main_top_left_one">{{ product_lists[0].product_name}}</view>
					<view class="main_top_left_two">{{ product_lists[0].product_desc}}</view>
				</view>
				<view class="main_top_right">{{  product_lists[0].now_money/100}}<span class="spanone">元</span></view>
			</view>
			<view class="main_bottom">
				<view class="ma_btm_top">
					<view class="ma_btm_one"></view>
					<view class="ma_btm_two">专属特权</view>
					<view class="ma_btm_three"></view>
				</view>
				<view class="ma_btm_bottom">
					<view class="bt_bottom_item">店铺信息收录</view>
					<view class="bt_bottom_item">短视频定向推广</view>
					<view class="bt_bottom_item">匹配用户定向推荐</view>
					<view class="bt_bottom_item">县市区域优先展示</view>
				</view>
			</view> -->
			<!-- 右下角图标 -->
			<!-- <view class="right_bottom_biao"></view>
		</view>

		<view class="select" v-if="product_lists && product_lists[0]&&product_lists[0].product_name">
			<view class="select_top">{{ product_lists[1].product_name }}</view>
			<view class="select_center">
				<view v-for="item,index in product_lists[1].childList" :key="index">
					<view :class="item.id == product_value.default.id ? 'select_center_item active' : 'select_center_item' " @tap="childList(item)"> 
						<view class="select_center_item_top">{{ item.product_desc }}</view>
						<view class="select_center_item_buttom">
							<view class="select_item_left">{{  item.product_name}}</view>
							<view class="select_item_right">{{ item.now_money/100 }}<span class="spanone">元</span></view>
						</view>
						最下的角标 -->
						<!-- <view class="jiaobiao" v-if="item.id == product_value.default.id"></view>
					</view>
				</view>
			</view>
			<view class="select_bottom">注：预估成功率仅为大数据分析结果</view>
		</view>  -->

		<!-- 支付系统 -->
		<!-- <view class="pay_radio">
			<radio-group @change="radioChange" style="height: 100rpx;">
				<label v-for="(item, index) in items" :key="item.value">
					<view class="radio_main">
						<image class="radio_img" :src=item.img></image>
						<view class="radio_text">{{item.name}}</view>
						<view class="radio_top">
							<radio :value="item.value" color="rgba(255, 87, 51, 1)" :checked="item.value == current" />
						</view>
					</view>
				</label>
			</radio-group>
		</view> -->
		
		<view class="schedule_title">
			<view class="schedule_left">
				<view class="oneo_one">1</view>
				<view class="oneo_two">填写店铺信息</view>
			</view>
			<view class="schedule_hr"></view>
			<view class="schedule_tight">
				<view class="oneo_one">2</view>
				<view class="oneo_two">选择套餐并支付推广费用</view>
			</view>
		</view>

		<view class="two">
			<view class="two_one">
				<view class="twotop_left">
					<view class="two_tit"></view>
					<view class="two_text">{{ product_value.required.product_name}}</view>
				</view>
				<view class="two_money">{{ product_value.required.now_money/100}}<span class="span1">元</span></view>
			</view>
			<view class="two_one">
				<view class="twotop_left">		
					<view class="two_tit"></view>
					<view class="two_text">{{  product_value.requiredtwo.product_name }}</view>
				</view>

			</view>
			<!-- 滑动快 -->
			<view class="two_tw">
				<scroll-view class="scroll-view_H" scroll-x="true" show-scrollbar="false">
					<view v-for="item,index in product_value.requiredtwo.childList" :key="index">
						<view :class="item.id ==product_value.default.id ? 'scroll_item active11' : 'scroll_item'" @tap="childList(item)" >
							<view class="item_top">{{ item.product_name }}</view>
							<view class="item_center"><span class="span2">￥</span>{{ item.now_money/100}}</view>
							<view class="item_bottom" v-if="item.id ==product_value.default.id"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- <view class="two_thr">注：预估转让成功率仅为大数据分析结果</view> -->
		</view>
		<!-- 列表1 -->
		<view class="three">
			<!-- <view class="thr_one"></view>
			<view class="thr_two"></view>
			<view class="thr_thr"></view> -->
		</view>
		<view class="pay_radio">
			<view class="twotop_left">
					<view class="two_tit"></view>
					<view class="two_text">支付方式</view>
				</view>
			<radio-group @change="radioChange" style="height: 100rpx;">
				<label v-for="(item, index) in items" :key="item.value">
					<view class="radio_main">
						<image class="radio_img" :src=item.img></image>
						<view class="radio_text">{{item.name}}</view>
						<view class="radio_top">
							<radio :value="item.value" color="rgba(255, 87, 51, 1)" :checked="item.value == current" />
						</view>
					</view>
				</label>
			</radio-group>
		</view>

		<!-- 最下方悬浮支付 -->
		<view class="buttom">
			<!-- <view class="buttom_top">
				<uni-data-checkboxhttp://localhost:5173/#/  @change="click_confirm" multiple v-model="range_value" :localdata="range"></uni-data-checkbox>
				<view class="buttom_top_text">勾选图标表示阅读并同意<span class="span1">《服务协议》</span></view>
			</view> -->
			<view class="buttom_left">实际支付金额￥{{user.pay_money/100}}</view>
			<view class="buttom_right" @tap="pay_throttle()">立即发布推广</view>
		</view>
	</view>
</template>

<script setup>
import {ref,reactive, onMounted, onBeforeMount} from 'vue'
import {onGotApiData,addClick} from '../../util/api.js'
	// 从上个页面获取到参数
	const props = defineProps({
				shop_id: String,
				shop_type:String,
				money:Number,
			});
	const propshop_id = props.shop_id
	const propshop_type = props.shop_type
	const propmoney = props.money
	// 用户的信息
	let user = reactive({
		openid:'',
		shop_type:0,
		link:'',
		channel_no:'',
		phone:'',
		shop_id:'',
		product_id:'',
		money:0,
		pay_money:0,
		son_channel_no:''
	})

	// 在组件渲染之前执行
	onBeforeMount(() => {
		if(propshop_id != null && propshop_id != '' && propshop_type != null && propshop_type != ''){
			user.shop_type = propshop_type
			user.shop_id = propshop_id
			user.money = propmoney
			console.log("上个页面传过来的",user.shop_type,user.shop_id)
		}
		console.log('组件准备渲染');
		user.channel_no = uni.getStorageSync('channel_no') || '';
		user.son_channel_no = uni.getStorageSync('son_channel_no') || '';
		user.link = uni.getStorageSync('link');
		user.phone = uni.getStorageSync('phone');
		// 调用请求产品信息的接口
		product();
		// user.openid = uni.getStorageSync('open_id') || null;
		// 从首页跳转到这个页面之后，没有登录，跳转到登录页面
		// if(!user.openid){
		// 	uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	});
		// }
		// 判断调用哪个接口
		if(user.shop_type == 1){
			lists_post()
		}else{
			lists_post_two()
		}
	})

	// 请求发布的详情
	  // 店铺详细信息
	  let trabsfer = reactive({
			result: {}
		});
		// 请求店铺详细信息接口
	const lists_post = () =>{
		let params = reactive({
			id : user.shop_id
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_transfer/info','GET',params,lists_value)
	}
	// 店铺详细信息请求的结果
	const lists_value = (result) => {
		trabsfer.result = result
		console.log('lists_value请求成功',trabsfer.result)
	}
	
		// 请求求租店铺详细信息接口
	const lists_post_two = () =>{
		let params = reactive({
			id : user.shop_id
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_rent/info','GET',params,lists_valuetwo)
	}
	// 店铺详细信息请求的结果
	const lists_valuetwo = (result) => {
		trabsfer.result = result
		console.log('lists_valuetwo请求成功',trabsfer.result)
	}



	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕');
	});
	// h5支付选择相关的内容
	let items = reactive([{
		value: 'WX_H5',
		img:'../../static/images/wx.png',
		name: '微信'
	},{
		value: 'ZFB_H5',
		img:'../../static/images/zfb.png',
		name: '支付宝'

	}])
	const current = ref('WX_H5')
	const radioChange = (evt) => {
		console.log("aaaa",evt.detail.value)
		current.value = evt.detail.value
		addClick('H5会员页',current.value)
	}

	// 同意勾选框的选中的值和，全部值列表
	const range_value = ref(0)
	let range = ref([{"value": 1}])
	const click_confirm = () =>{
		console.log("我是选中的值",range_value.value[0])
	}

	// 产品的列表
	let product_lists = ref([])
	// 选中的产品
	let product_value  = reactive({
		required:{},
		requiredtwo:{},
		default:{}
	})
	// 请求产品会员的接口
	const product = () =>{
		let params = reactive({})
		params.channelNo = user.son_channel_no == ''? user.channel_no : user.son_channel_no,
		params.shop_type = user.shop_type,
		params.money = user.money
		// params.shop_type = 2
		console.log("params",params)
		onGotApiData('/api/app/product/list_v3','GET',params,product_result)
	}

	// 会员页面产品请求的结果
	const product_result = (result) => {
		// 遍历一下，会有json字符串
		result.forEach((value,index,Array)=>{
			if(value.childList){
				Array[index].childList = JSON.parse(value.childList)
				}
			})
		product_lists.value = result
		product_value.required = result[0]
		// 赋值最初是的总金额
		user.pay_money = result[0].now_money
		product_value.requiredtwo = result[1]
		// product_value.default = product_lists.value[0]
		console.log('我是产品结果1',result)
		console.log('我是产品结果2',product_value.required)
		// console.log('我选中的产品是', product_value.default)
	}
	// 点击产品选择框事件(可以取消)
	const childList = (item) =>{
		addClick("H5会员页",item.product_name)
		console.log('e:',item);
		if(item.id == product_value.default.id){
			product_value.default = {}
			user.pay_money = Number(product_value.required.now_money) 
		}else{
			product_value.default = item
			user.pay_money = Number(product_value.required.now_money) + Number(item.now_money)
			console.log("我需要支付的请",user.pay_money)
		}
		console.log("我选中的是",product_value.default)
	}

		// 支付加一个节流
	let lastClickTime =ref(0)
	const pay_throttle = () => {
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - lastClickTime.value > 1200) {
		// 执行支付
			pay()
			lastClickTime.value = currentTime
		} else {
			lastClickTime.value = currentTime
		}
	}
	// 点击下方支付
	const pay = () =>{
		addClick("H5会员页","立即开通会员按钮")

		// if(!range_value.value[0]){
		// 	console.log("我没有点击同意")
		// 	uni.showToast({channel_no
		// 		title: '请勾选服务协议',
		// 		icon: 'none',
		// 		duration: 2000
		// 	});
		// 	return
		// }
		uni.showLoading({
			title: '支付中',
			duration: 2000
		});
			if(product_value.default.id){
				user.product_id = product_value.required.id + ',' + product_value.default.id
			}else{
				user.product_id =  product_value.required.id
			}
		let params = reactive({})
		params.channel_no = user.channel_no,
		params.sub_channel_no = user.son_channel_no,
		params.rent = user.money,
		params.product_id = user.product_id,
		params.pay_type = current.value,
		params.link = user.link,
		params.phone = user.phone,
		// params.phone = '13562354412',
		params.shop_type = user.shop_type,
		params.shop_id = user.shop_id
		console.log("params",params)
		onGotApiData('/api/app/order/create_v1','POST',params,pay_result)
	}

	// 支付请求的结果
	const pay_result = (result) => {
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
	// 唤起支付
	const requestPayment = (result) => {
		// 清除弹框
		setTimeout(function(){
			uni.hideLoading();
		})
		console.log("请球支付结果",result)
		window.location.href = result.payUrl
	}
</script>

<style lang="scss" scoped>
		@font-face {
		font-family: 'MyFont';
		src: url('../../static/font/Alimama_ShuHeiTi_Bold.ttf') format('ttf'),
			// url('path/to/font.woff') format('woff');
		/* 可以根据字体包文件的格式提供多个URL */
		/* 可以指定字体的样式属性，如font-weight和font-style */
		}
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-family: 'MyFont', sans-serif;
		// background: linear-gradient(90deg, rgba(250, 244, 230, 1) 0%, rgba(242, 226, 196, 1) 100%);
		width: 750rpx auto;
		.hader{
			width: 730rpx;
			// height: 310rpx;
			margin: 0 auto;
			// border: 1px solid black;	
			margin-top: 10rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			font-family: 'MyFont', sans-serif;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			.hader_title{
				width: 730rpx;
				height: 80rpx;
				display: flex;
				.hader_title_left{
					width: 8rpx;
					height: 40rpx;
					margin: 20rpx 0 0 20rpx;
					background-color: rgba(255, 87, 51, 1);
				}
				.hader_title_right{
					font-size: 36rpx;
					font-weight: 600;
					line-height: 80rpx;
					margin: 0 0  0 10rpx;
					color: rgba(0, 0, 0, 1);
					.spanoone{
						font-weight: 600;
						font-size: 32rpx;
						color: rgba(255, 87, 51, 1);
					}
				}
			}
			.hader_main{
				width: 730rpx;
				height: 240rpx;
				display: flex;
				.item_left{
						width: 200rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin: 10rpx 0 0 10rpx;
						// background-image: url(https://img.72qq.com/file/202007/24/aed12b08ae.jpg);
						// background-size: 100% 100%;
						.item_left_img{
							height: 200rpx;
							width: 200rpx;
							border-radius: 20rpx;
						}
					}
					.item_right{
						width: 500rpx;
						height: 230rpx;
						margin-left: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						.item_right_one{
							font-size: 34rpx;
							margin-left: 15rpx;
							margin-top: 15rpx;
							font-weight: 600;
							overflow: hidden;
							// 超出出现省略号
							text-overflow: ellipsis;
							// 换行
							white-space: nowrap;
						}
						.item_right_two{
							// width: 100rpx;
							font-size: 24rpx;
							margin-left: 15rpx;
							line-height: 50rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							color: rgba(143, 143, 143, 1);
							white-space: nowrap;
						}
						
						.item_right_identifying{
							width: 500rpx;
							height: 34rpx;
							display: flex;
							margin-top: 2rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// border: 1px solid black;
							.item_right_identifying_item{
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}
						.item_right_three{
							color: rgb(10, 10, 10);
							font-size: 18px;
							margin-left: 10rpx;
							line-height: 80rpx;
						}
						.item_right_five{
							font-size: 12px;
							margin-left: 30rpx;
							color: rgb(163, 169, 175);
						}
					}
			}
			.hader_maintwo{
				width: 730rpx;
				height: 240rpx;
				// margin-top: -10rpx;
				display: flex;
				.item_left{
						width: 500rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin-left: 10rpx;
						.item_left_one{
							width: 690rpx;
							height: 60rpx;
							// background-color: pink;
							margin: 6rpx 0 0 10rpx;
							line-height: 60rpx;
							font-size: 30rpx;
							font-weight: 700;
							color: rgba(46, 46, 46, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.isspan{
								color: rgba(255, 87, 51, 1);
							}
						}
						.item_right_identifying{
							width: 500rpx;
							height: 34rpx;
							display: flex;
							margin-top: 6rpx;
							margin-bottom: 12rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// border: 1px solid black;
							.item_right_identifying_item{
								// width: 120rpx;
								height: 30rpx;
								font-size: 12px;
								font-weight: 500;
								line-height: 30rpx;
								padding-left: 5rpx;
								padding-right: 5rpx;
								color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 10rpx;
							}
						}
						.item_left_two{
							width: 490rpx;
							height: 44rpx;
							margin: 2rpx 0 0 10rpx;
							// background-color: pink;
							line-height: 44rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: rgb(88, 86, 86);
						}
					}
			}
			// 下方的横线
			.hader_hr{
				width: 680rpx;
				height: 1rpx;
				background-color: rgb(213, 213, 213);
				margin: 0 auto;
				margin-bottom: 10rpx;
			}
			.hader_prompt{
				height: 100rpx;
				width: 660rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 12px;
				line-height: 40rpx;
				color: rgba(235, 87, 54, 1);
			}
		}
		// 下方的vip部分
		.main{
			width: 730rpx;
			height: 340rpx;
			margin: 0 auto;
			border: 1px solid rgba(255, 87, 51, 1);
			margin-top: 14rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			font-family: 'MyFont', sans-serif;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			position: relative;
			.main_top{
				width: 730rpx;
				height: 120rpx;
				border-radius: 6px;
				background: rgba(252, 244, 242, 1);
				// box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				display: flex;
				.main_top_left{
					width: 520rpx;
					height: 120rpx;
					padding-left: 20rpx;
					.main_top_left_one{
						width: 600rpx;
						height: 74rpx;
						font-size: 36rpx;
						font-weight: 600;
						line-height: 80rpx;
						color: rgba(0, 0, 0, 1);
					}
					.main_top_left_two{
						width: 600rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: rgb(134, 126, 119);
					}
				}
				.main_top_right{
					width: 190rpx;
					height: 120rpx;
					font-size: 48rpx;
					font-weight: 600;
					line-height: 120rpx;
					color: rgba(255, 87, 51, 1);
					text-align: center;
					.spanone{
						font-size: 26rpx;
					}
				}
			}
			.main_bottom{
				width: 730rpx;
				height: 230rpx;
				.ma_btm_top{
					width: 730rpx;
					height: 100rpx;
					display: flex;
					.ma_btm_one{
						width: 100rpx;
						height: 4px;
						background-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
						margin: 48rpx 0 0 165rpx;
					}
					.ma_btm_two{
						height: 100rpx;
						width: 200rpx;
						font-size: 36rpx;
						font-weight: 600;
						line-height: 100rpx;
						color: rgba(112, 66, 19, 1);
						text-align: center;
					}
					.ma_btm_three{
						width: 100rpx;
						height: 4px;
						background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
						margin: 48rpx 0 0 0;
					}
				}
				.ma_btm_bottom{
					width: 730rpx;
					height: 120rpx;
					display: flex;
					flex-wrap: wrap;
					// padding-bottom: 10rpx;
					// justify-content: center;
					// align-items: center;
					.bt_bottom_item{
						width: 300rpx;
						height: 50rpx;
						border-radius: 8rpx;
						background: rgba(245, 245, 245, 1);
						margin: 0 20rpx 10rpx 36rpx;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 50rpx;
						color: rgba(112, 66, 19, 1);
						text-align: center;
					}
				}
			}
			.right_bottom_biao{
				width: 56rpx;
				height: 56rpx;
				border-radius: 8rpx;
				background: url(../../static/images/jiaobiao.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				left: 680rpx;
				top: 290rpx;
			}
		}
		.select{
			width: 730rpx;
			height: 430rpx;
			margin: 0 auto;
			margin-top: 14rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			font-family: 'MyFont', sans-serif;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			.select_top{
				width: 600rpx;
				height: 90rpx;
				font-size: 38rpx;
				font-weight: 600;
				line-height: 90rpx;
				color: rgba(0, 0, 0, 1);
				margin-left:16rpx;
			}
			.select_center{
				width: 730rpx;
				height: 260rpx;
				padding-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				.select_center_item{
					width: 330rpx;
					height: 110rpx;
					// background-color: pink;
					border-radius: 8rpx;
					border: 1px solid rgba(128, 128, 128, 1);

					position: relative;
					// margin: 6rpx 15rpx 6rpx 15rpx;
					.select_center_item_top{
						width: 220rpx;
						height: 30rpx;
						padding: 0  8rpx 0 8rpx;
						border-radius: 8rpx 4rpx 4rpx 4rpx;
						background: rgba(255, 87, 51, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
						line-height: 30rpx;
					}
					.select_center_item_buttom{
						width: 300rpx;
						height: 80rpx;
						margin-left: 20rpx;
						display: flex;
						.select_item_left{
							width: 150rpx;
							height: 80rpx;
							font-size: 28rpx;
							font-weight: 600;
							line-height: 80rpx;
							color: rgba(0, 0, 0, 1);
							text-align: left;
						}
						.select_item_right{
							width: 150rpx;
							height: 80rpx;
							font-size: 36rpx;
							font-weight: 700;
							line-height: 80rpx;
							color: rgba(56, 56, 56, 1);
							text-align: center;
							/** 文本2 */
							.spanone{
								font-size: 26rpx;
								font-weight: 400;
								
							}

						}
					}
					.jiaobiao{
						width: 50rpx;
						height: 50rpx;
						border-radius: 8rpx;
						background: url(../../static/images/jiaobiao.png) no-repeat;
						background-size: 100% 100%;
						position: absolute;
						left: 284rpx;
						top: 64rpx;
					}
				}
				.active{
					background: rgb(252, 227, 221);
					border: 1px solid rgba(255, 87, 51, 1);
					.select_center_item_top{
						background: rgba(255, 87, 51, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			}
			.select_bottom{
				width: 730rpx;
				height: 60rpx;
				font-size: 12px;
				font-weight: 400;
				line-height: 60rpx;
				color: rgb(135, 128, 120);
				text-align: center;
			}
		}
		.pay_radio{
			width: 730rpx;
			height: 230rpx;
			// border: 1px solid black;
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 1);
			// box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			margin: 0 auto;
			margin-top: 10rpx;
			margin-bottom: 150rpx;
			.twotop_left{
					width: 500rpx;
					height: 80rpx;
					// background-color: #000;

					// border: 1px solid black;
					display: flex;
					.two_tit{
						width: 8rpx;
						height: 34rpx;
						margin: 26rpx 16rpx 0 14rpx;
						background-color: rgba(255, 87, 51, 1);
					}
					.two_text{
						width: 480rpx;
						height: 80rpx;
						line-height: 86rpx;
						font-size: 16px;
						font-weight: 700;
						color: rgba(0, 0, 0, 1);
					}
				}
			.radio_main{
				width: 100%;
				height: 50rpx;
				padding: 16rpx 0 10rpx 10rpx;
				display: flex;
				.radio_top{	
					width: 48rpx;
					height: 48rpx;
					margin-left: 390rpx;
				}
				.radio_img{
					width: 44rpx;
					height: 44rpx;
					margin: 2rpx 0 0 20rpx;
				}
				.radio_text{
					width: 148rpx;
					height: 50rpx;
					margin: 0rpx 0 0 30rpx;
					color: rgba(56, 56, 56, 1);
					font-size: 32rpx;
					line-height: 48rpx;

				}
			}
		}
		// 进度条
		.schedule_title{
			width: 750rpx;
			height: 130rpx;
			margin: 0 auto;
			padding-top: 10rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-around;
			font-size: 24rpx;
			.schedule_left{
				width: 250rpx;
				height: 150rpx;
				.oneo_one{
					width: 36rpx;
					height: 36rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					border: 1px solid #999;
					border-radius: 50%;
					line-height: 36rpx;
					text-align: center;
				}
				.oneo_two{
					width: 250rpx;
					height: 36rpx;
					margin: 0 auto;
					text-align: center;
					margin-top: 20rpx;
				}
			}
			.schedule_hr{
				width: 120rpx;
				height: 1rpx;
				background: rgb(194, 182, 182);
				margin-top: 74rpx;
			}
			.schedule_tight{
				width: 300rpx;
				height: 150rpx;
			
				.oneo_one{
					width: 36rpx;
					height: 36rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					border: 1px solid rgba(255, 87, 51, 1);
					border-radius: 50%;
					line-height: 36rpx;
					text-align: center;
					color: #F5F5F5;
					background-color: rgba(255, 87, 51, 1);
				}
				.oneo_two{
					width: 275rpx;
					height: 36rpx;
					margin: 0 auto;
					text-align: center;
					margin-top: 20rpx;
					color: rgba(255, 87, 51, 1);
				}
			}
		}
		.two{
			width: 730rpx;
			margin: 0 auto;
			margin-top: 6rpx;
			border-radius: 6px;
			padding-top: 14rpx;
			margin-bottom: 10rpx;
			background: rgba(255, 255, 255, 1);
			// box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			.two_one{
				width: 730rpx;
				height: 80rpx;
				margin: 10rpx 0 10rpx 0;
				display: flex;
				justify-content: space-between;
				.twotop_left{
					width: 500rpx;
					height: 80rpx;
					// background-color: #000;

					// border: 1px solid black;
					display: flex;
					.two_tit{
						width: 8rpx;
						height: 34rpx;
						margin: 20rpx 16rpx 0 14rpx;
						background-color: rgba(255, 87, 51, 1);
					}
					.two_text{
						width: 480rpx;
						height: 80rpx;
						line-height: 70rpx;
						font-size: 16px;
						font-weight: 700;
						color: rgba(0, 0, 0, 1);
					}
				}
				.two_money{
					width: 200rpx;
					height: 80rpx;
					// background-color: pink;
					font-size: 38rpx;
					font-weight: 700;
					line-height: 70rpx;
					text-align: center;
					color: rgba(255, 87, 51, 1);
					.span1{
						font-size: 24rpx;
					}
				}
			}
			.two_tw{
				width: 700rpx;
				height: 200rpx;
				margin: 0 auto;
				// overflow-x: hidden;
				// border: 1px solid black;
				// display: flex;
				:deep(.uni-scroll-view-content){
					display: flex;
					.scroll_item{
						width: 200rpx;
						height: 180rpx;
						margin-right: 10rpx;
						border-radius: 10rpx;
						background: linear-gradient(360deg, rgba(255, 228, 228, 1) 0%, rgba(255, 225, 225, 0) 100%);
						border: 1px solid rgba(213, 209, 206, 1);
						position: relative;
						.item_top{
							width: 200rpx;
							height: 40rpx;
							text-align: center;
							margin-top: 26rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							font-weight: 600;
							color: rgba(0, 0, 0, 1);
						}
						.item_center{
							width: 200rpx;
							height: 80rpx;
							margin-top: 6rpx;
							text-align: center;
							line-height: 80rpx;
							font-size: 48rpx;
							font-weight: 700;
							color: rgba(255, 87, 51, 1);
							.span2{
								font-size: 30rpx;
							}
						}
						.item_bottom{
							width: 48rpx;
							height: 48rpx;
							z-index: 99;
							position: absolute;
							top: 136rpx;
							left: 156rpx;
							background: url(../../static/images/jiaobiao.png) no-repeat;
							background-size: 100% 100%;
						}
					}
					.active11{
						border: 1px solid rgba(255, 87, 51, 1);
					}
				}

			}
			.two_thr{
				width: 730rpx;
				height: 80rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 12px;
				line-height: 60rpx;
				color: rgb(167, 158, 149);
			}
		}
		.three{
			width: 730rpx;
			height: 1500rpx;
			margin-top: 10rpx;
			margin: 0 auto;
			background: url(../../static/images/datu.jpg) no-repeat;
			background-size: 100% 100%;
		}
		// 最下方的悬浮
		.buttom{
			width: 100%;
			height: 110rpx;
			// 参照浏览器视口进行定位
			position: fixed;
			// top: calc(100vh - 160rpx);
			bottom: 0;
			display: flex;
			justify-content: center;
			// border: 1px solid black;
			background: rgba(255, 255, 255, 1);
			// background: linear-gradient(90deg, rgba(250, 244, 230, 1) 0%, rgba(242, 226, 196, 1) 100%);
			.buttom_top{
				width: 500rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				// background-color: pink;
				display: flex;
				.buttom_top_text{
					font-size: 24rpx;
					line-height: 50rpx;
					.span1{
						color: rgb(255, 114, 64);
					}
				}
			}
			.buttom_buttom{
				width: 600rpx;
				height: 80rpx;
				margin:  0 auto;
				margin-top: 10rpx;
				border-radius: 10rpx;
				background-color: rgb(255, 114, 64);
				line-height: 80rpx;
				text-align: center;
				color: #F5F5F5;
				font-weight: 500;
				font-size: 32rpx;
			}
			.buttom_left{
				width: 480rpx;
				height: 110rpx;
				font-size: 32rpx;
				font-weight: 400;
				text-align: center;
				line-height: 110rpx;
				color: rgba(255, 87, 51, 1);
			}
			.buttom_right{
				width: 240rpx;
				height: 110rpx;
				background-color: rgb(255, 114, 64);
				line-height: 110rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #F5F5F5;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
		// 勾选选中样式的穿透
		:deep(.uni-data-checklist){
			width: 40rpx;
			flex: 0.6;
		}
		:deep(.uni-data-checklist .checklist-group .checklist-box .checkbox__inner) {
			border-radius: 50%;
			border-color: #000 !important;
		}
		:deep(.uni-data-checklist .checklist-group .checklist-box.is-checked .checkbox__inner) {
			background-color: rgb(255, 114, 64) !important;
			border-color: rgb(255, 114, 64) !important;
		}
	}
</style>
